import { defineComponent, PropType, ref } from 'vue';
import { QuestionType } from '../typing';

export default defineComponent({
  props: {
    question: {
      type: Object as PropType<QuestionType>,
      required: true,
    },
    language: {
      type: String as PropType<'zh' | 'en'>,
      required: true,
    },
  },
  setup(props) {
    const { question, language } = props;
    const mode = ref<string>(question.mode);
    const questionProper =
      language === 'zh' ? question.questionProperZh : question.questionProperEn;

    return () => {
      return (
        <div
          class={[
            'question-container',
            'question-start-container',
            { 'question-design': mode.value === 'design' },
          ]}
        >
          <div class="question-title" v-html={questionProper!.title}></div>
        </div>
      );
    };
  },
});
